<!doctype html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>12_transition</title>

   <style>
      #d1 {
         width: 100px;height: 100px;
         /*background: #00f;*/
         background: #ff0 url("img/1wan.png") no-repeat center center;
         /*1.指定过度的属性*/
         /*transition-property: background ;*/
         /*transition-property: all ;    !*all支持所有过度的属性*!*/
         /*2.指定过度时长*/
         /*transition-duration: 3s;*/
         /*3.过的时间曲线函数*/
         /*transition-timing-function: linear;    !*匀速*!*/
         /*transition-timing-function: ease-in;   !*持续加速*!*/
         /*transition-timing-function: ease-out;  !*持续减速*!*/
         /*transition-timing-function: ease-in-out;  !*慢速-加速-减速*!*/
         /*transition-timing-function: ease;      !*慢速-加速-减速*!*/
         /*4.过渡的延迟时间*/
         /*transition-delay: 2s;*/
         /*5.过渡简写方式*/
         transition: all 3s ease 0.5s;
      }

      #d1:hover {
         /*background: #f00;*/
         /*width: 500px; height: 500px;*/
         /*border-radius: 50%;*/
         /*background:#0ff url("img/2wan.png")no-repeat;*/
         /* box-shadow: 5px  5px 10px 20px #006699; */
         /* visibility: hidden; */
         /* transform: translate(400px) rotate(180deg); */
         transform: translate(800px);
      }
   </style>
</head>

<body>

  <p>过渡</p>
  <div id="d1"></div>

</body>

</html>